import { createStyles } from 'antd-style';

export const alphaBg = {
  dark: 'url() 0% 0% / 26px',
  light:
    'url() 0% 0% / 26px',
};

export const useStyles = createStyles(({ css, token }) => ({
  scaleBox: css`
    cursor: pointer;

    position: relative;

    width: 48px;
    height: 32px;

    background-position:
      0 0,
      0 8px,
      8px -8px,
      -8px 0;
    background-size: 16px 16px;

    transition: scale 400ms ${token.motionEaseOut};

    &:active {
      scale: 0.8;
    }
  `,
  scaleItem: css`
    width: 100%;
    height: 100%;
  `,
  scaleRowTitle: css`
    width: 64px;
    height: 32px;
  `,
  text: css`
    opacity: 0.5;
  `,
}));
